import React, { useEffect, useState } from 'react'
import './index.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
interface listType {
  title: string,
  pic: number,
  date: string,
  id: string,
  children: childType[]
}
interface childType {
  color: string
}
const User: React.FC = () => {
  const navigate = useNavigate()
  const [list, getList] = useState<listType[]>([])
  const getAxiosList = async () => {
    const resp = await axios.get('/api/list')
    getList(resp.data.list)
  }
  const clickId=async(id:string)=>{
    const resp=await axios.get('/api/lists',{params:{id:id}})
    const {code}=resp.data
    if(code===200){
      navigate('/')
    }
  }
  useEffect(() => {
    getAxiosList()
  }, [])
  return (
    <div className='user'>
      <div className="user-nav">全部车系</div>
      <div className="user-main">
        {
          list.map(v=>{
            return <div key={v.id} className="user-main-item" onClick={()=>clickId(v.id)}>
              <div>{v.title}</div>
              <div>
                <div>{v.date}</div>
                <div>{v.pic}万</div>
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
}

export default User